<template>
  <div class="kpi">
    <div class="kpiTitle">
      <div class="return">
        <router-link to="/home/view"><i style="color: #fff" class="iconfont icons-fanhui"></i></router-link>
        
      </div>
        <div class="leftTitle">
            KPI指标看板详细展示
        </div>
        <div class="kpiBanner">
            <a href='javascript:;' class="kpiOption" :class="{disabled: symbolSize >= 50}" type='button' title="放大" @click="changeSymbolSize(true)"> <i class="iconfont icons-enlarge"></i> </a>
            <a href='javascript:;' class="kpiOption" :class="{disabled: symbolSize <= 10}" type='button' title="缩小" @click="changeSymbolSize(false)"> <i class="iconfont icons-narrow"></i> </a>
            <a href='javascript:;' class="kpiOption" type='button' title="vertical" @click="changeOrient('vertical')"> <i class="iconfont icons-liucheng"></i></a>
            <a href='javascript:;' class="kpiOption" type='button' title="horizontal" @click="changeOrient('horizontal')"> <i class="iconfont icons-liucheng rotate270"></i></a>
        </div>
    </div>
    <div class="content" id="main">

    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import echarts from "echarts";

export default {
  data() {
    return {
      option: {},
      myCharts: null,
      orient: "horizontal",
      symbolSize: 25,
      fontSize: 16
    };
  },
  methods: {
    changeOrient(str) {
      this.orient = str;
      this.option.series[0].orient = this.orient;
      this.myCharts.dispose();
      this.renderEcharts(this.option);
    },
    changeSymbolSize(status) {
      if (status) {
        this.symbolSize = this.symbolSize > 50 ? 50 : (this.symbolSize += 5);
        this.fontSize = this.fontSize > 28 ? 28 : (this.fontSize += 2)
      } else {
        this.symbolSize = this.symbolSize <= 10 ? 10 : (this.symbolSize -= 5);
        this.fontSize = this.fontSize <= 12 ? 12 : (this.fontSize -= 2)
      }
      if (this.symbolSize < 50 && this.symbolSize > 10 || this.fontSize < 28 && this.fontSize > 12) {
        this.option.series[0].symbolSize = this.symbolSize;
        this.option.series[0].label.normal.fontSize = this.fontSize;
        this.myCharts.dispose();
        this.renderEcharts(this.option);
      }
    },
    loadCanvas(data) {
      this.option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          formatter: function(param) {
            var showWords = "";
            if (param.data.showWords != undefined) {
              showWords = param.data.showWords;
            } else {
              showWords = param.data.name;
            }
            var value = param.data.value;
            return showWords ;
          }
        },
        series: [
          {
            type: "tree",

            data: [data],

            top: "10%",
            left: "8%",
            bottom: "10%",
            right: "15%",

            // layout: 'radial',
            orient: "horizontal",

            symbolSize: 25,

            label: {
              normal: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
                fontSize: this.fontSize
              }
            },

            leaves: {
              label: {
                normal: {
                  position: "right",
                  verticalAlign: "middle",
                  align: "left"
                }
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 550,
            initialTreeDepth: 2
          }
        ]
      };
      this.renderEcharts(this.option);
    },

    /** */
    renderEcharts(options) {
      var block = document.querySelector("#main");

      this.myCharts = echarts.init(block);

      options.series[0].orient = this.orient;

      this.myCharts.setOption(options);

      window.onresize = function() {
        this.myCharts.resize();
      };
    }
  },
  mounted() {
    this.loadCanvas(this.kpiData);
    console.log(this.kpiData)
    
  },
  computed: {
    localComputed() {
      /* ... */
    },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      // ...
      kpiTreeData: state => state.kpiTreeData,
      kpiIndex: state => state.kpiIndex,
      kpiData: state => state.kpiData
    })
  },
};
</script>
<style>
.kpi {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}
.kpiTitle {
  font-size: 0.2rem;
  padding: 0.05rem 0.2rem;
  display: flex;
  background: #f3823e;
  color: #fff;
}
.leftTitle {
  /* text-align: center; */
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.return {
  margin-top: 5px;
}
.content {
  flex: 1;
  background: #d6e0f9;
}
canvas {
  background: rgba(0,0,0,.1);
}
.kpiOption {
  border: 1px solid #fff;
  padding: 5px;
  border-right: 0;
  float: left;
  
}
.kpiOption .iconfont,
.return .iconfont {
  font-size: 0.25rem;
  color: #fff;
}
.kpiOption:nth-last-child(1) {
  border-right: 1px solid #ccc;
  border-radius: 0 3px 5px 0;
}
.kpiOption:nth-child(1) {
  border-radius: 3px 0 0 5px;
}
.rotate270 {
  transform: rotate(270deg);
  display: block;
}
.disabled {
  background: #ccc;
}
</style>

